// src/nodes/ToolNode.jsx
import React from 'react';
import { Handle } from 'reactflow';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTools, faCopy } from '@fortawesome/free-solid-svg-icons';

const ToolNode = ({ id, data }) => {
  const copyNodeId = () => {
    navigator.clipboard.writeText(id)
      .catch(err => console.error('Failed to copy:', err));
  };
  return (
    <div className="agent-node p-4 w-80 rounded-lg bg-white border-2 border-blue-100 shadow-md cursor-pointer transition-all hover:border-blue-300 relative">
      <div className="flex items-center gap-2">
        <FontAwesomeIcon 
          icon={faTools} 
          className="text-blue-500 text-lg"
        />
        <div className="min-w-0 flex-1">
          <h3 className="font-semibold text-gray-800 truncate">{data.label}</h3>
          <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
            <p className="overflow-hidden truncate">nodeID: {id}</p>
            <FontAwesomeIcon 
              icon={faCopy}
              className="text-gray-400 hover:text-blue-500 cursor-pointer ml-1"
              onClick={(e) => {
                e.stopPropagation();
                copyNodeId();
              }}
              title="复制节点ID"
            />
          </div>  
          <p
            className="text-xs text-gray-500 mt-1 overflow-hidden truncate"
          >
            desc: {data.desc}
          </p>
          <p
            className="text-xs text-gray-500 mt-1 overflow-hidden truncate"
          >
            toolName: {data.toolName}
          </p>
          <p
            className="text-xs text-gray-500 mt-1 overflow-hidden truncate"
          >
            execType: {data.execType}
          </p>
        </div>
      </div>
      <Handle
        id="tool"
        type="source"
        position="right"
        className="!w-4 !h-4 !bg-orange-500 !border-white !translate-x-1/2"
      />
    </div>
  );
};

export default ToolNode;